<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class="father">
        <button>三角形</button>
        <button>圆形</button>
        <button>矩形</button>
        <button>正方形</button>
    </div>
    <script src="../../JS基础/utils.js"></script>
    <script>

        class Graph {
            constructor(left, top, color) {
                this.left = left;
                this.top = top;
                this.node = document.createElement('div');;
                this.color = color;

            }
            setPosition() {
                this.node.style.cssText += `
                position:absolute;
                left:${this.left}px;
                top:${this.top}px;
                `
            }
            setColor() {
                console.log(this.color);
                this.node.style.cssText += `
                background-color: ${this.color};
                `
                console.log(this.node.style.backgroundColor);
            };
            setSize(width, height) {
                this.node.style.cssText += `
                width:${width}px;
                height:${height}px;
                `
            }
        }

        //三角形
        class Triangle extends Graph {
            constructor(left, top, color, height, bottom) {
                super(left, top, color);
                this.height = height;//50
                this.bottom = bottom;//100
                this.show()
            }
            show() {
                this.setPosition();
                this.node.style.cssText += `
                width: 0;
                height: 0;
                border-bottom: ${this.height}px ${this.color} solid;
                border-left: ${this.bottom / 2}px transparent solid;
                border-right: ${this.bottom / 2}px transparent solid;
                `
                document.body.appendChild(this.node)
            }
        }
        //圆形

        class Circle extends Graph {
            constructor(left, top, color, radius) {
                super(left, top, color);
                this.radius = radius
                this.show()
            }
            show() {
                this.setColor();
                this.setPosition();
                this.setSize(this.radius * 2, this.radius * 2)
                this.node.style.borderRadius = '50%';
                document.body.appendChild(this.node)
            }
        }

        class Rectangle extends Graph {
            constructor(left, top, color, width, height) {
                super(left, top, color);
                this.width = width;
                this.height = height;
                this.show();
            }
            show() {
                this.setColor();
                this.setPosition();
                this.setSize(this.width, this.height)
                document.body.appendChild(this.node)
            }

        }
        class Square extends Rectangle {
            constructor(left, top, color, length) {
                super(left, top, color, length, length);

            }
        }







        let father = document.getElementsByClassName('father')[0];
        father.addEventListener('click', function (event) {
            let text = event.target.innerText;
            let left, top, height;
            let color = `rgb(${createRandom(255)},${createRandom(255)},${createRandom(255)})`
            switch (text) {
                case '三角形':
                    let bottom = createRandom(200);
                    height = createRandom(200);
                    left = createRandom(innerWidth - bottom);
                    top = createRandom(innerHeight - height);
                    new Triangle(left, top, color, height, bottom);
                    break;
                case '圆形':
                    let radius = createRandom(200);
                    left = createRandom(innerWidth - radius * 2)
                    top = createRandom(innerHeight - radius * 2)
                    new Circle(left, top, color, radius)
                    // console.log(new Circle(left, top, color, radius));
                    break;
                case '矩形':
                    let width = createRandom(200);
                    height = createRandom(200);
                    left = createRandom(innerWidth - width)
                    top = createRandom(innerHeight - height)
                    new Rectangle(left, top, color, width, height);
                    break;
                case '正方形':
                    let length = createRandom(150);
                    left = createRandom(innerWidth - length)
                    top = createRandom(innerHeight - length)
                    new Square(left, top, color, length)
                    break;

            }

        })
    </script>

</body>

</html>